<template>
	<view class="bac-col-fa min-h-100">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<qmy-custom-navbar :top="42" :title="'参加的活动'"></qmy-custom-navbar>
		<!-- #endif -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 'px'}">
			<v-tabs :fixed="true" :scroll="false" :pills="true" bgColor="#ffffff00" pillsColor="#ffffff00"
				fontSize="30rpx" activeFontSize="32rpx" lineHeight="40rpx"
				activeColor="linear-gradient(to right, #1e1e1e, #1e1e1e)"
				color="linear-gradient(to right, #616161, #616161)" bold lineColor="#14cc60" v-model="current"
				:tabs="tabs"></v-tabs>
		</view>
		<!-- 票号二维码弹窗 -->
		<uni-popup ref="ticketPopup" type="center" @change="changePopup">
			<view class="group-popup-con">
				<uqrcode ref="uqrcode" canvas-id="uqrcode" sizeUnit="rpx" :auto="false" :options="qrOptions"
					:value="filteredSignupData[ticketIndex].ticket_info[0]._id" :loading="loadingStatus" :size="340"
					:start="false" @complete="complete($event, 'qr2')">
				</uqrcode>
				<view class="fs-28 fw-600 mt-10">{{ ticketId || '暂无票号' }}</view>
				<view class="fs-24 col-b1 mt-5">(请勿泄露，出示给组织者核验)</view>
			</view>
		</uni-popup>

		<view class="ping-20">
			<!-- 如果活动列表为空 -->
			<view v-if="signupData.length == 0 || filteredSignupData.length == 0" class="activity-empty-box">
				<image class="activity-empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/activity-mepty.png"
					mode="scaleToFill" />
				<view class="fs-28 fw-600">暂无活动</view>
			</view>
			<view v-else>
				<view class="bac-col-f br-20 ping-20 pos-rela" :class="index != signupData.length - 1?'mb-20':''"
					v-for="(item,index) in filteredSignupData" :style="{opacity: item.ticket_info[0].status == 1?0.5:1}"
					:key="index">
					<view v-if="item.ticket_info[0].status == 1"
						class="iconfont ic-a-jianqudingceng6 pos-abso col-00ba31"
						style="right: 20rpx;top: 20rpx; font-size: 120rpx;z-index: 2;"></view>
					<view class="flex-dir-row ali-item-cen"
						@click="$NavigateTo(`/pages/detail/detail?id=${item.activity_id}`)">
						<view class="img-190 pos-rela">
							<image class="br-20 img-190" :src="item.activity_info[0].imgs[0].src" mode="aspectFill">
							</image>
							<view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10" style="top: 0;left: 0;z-index: 2;"
								:class="item.activity_info[0].signup_start_time > Date.now()?'bac-col-fa col-0a2e365e':item.activity_info[0].signup_start_time < Date.now() && item.activity_info[0].signup_end_time > Date.now() ? 'bac-col-00b col-f' : item.activity_info[0].start_time < Date.now() && item.activity_info[0].end_time > Date.now() ? 'bac-col-ffd col-f' : item.activity_info[0].start_time > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">
								{{item.activity_info[0].signup_start_time > Date.now()?'未开启':item.activity_info[0].signup_start_time < Date.now() && item.activity_info[0].signup_end_time > Date.now() ? '报名中' : item.activity_info[0].start_time < Date.now() && item.activity_info[0].end_time > Date.now() ? '进行中' : item.activity_info[0].start_time > Date.now() ? '待进行' : '已结束'}}
							</view>
						</view>
						<view class="fs-24 flex-dir-col flex-x-bet ml-20" style="height: 180rpx;">
							<view class="fs-34 fw-600 text-element-1">{{item.activity_info[0].name}}</view>
							<view class="flex-dir-row ali-item-cen mt-10">
								<view class="text-tips bac-col-00b" v-for="(tag,i) in item.activity_info[0].tags"
									:key="i">
									{{tag}}
								</view>
							</view>
							<view class="flex-dir-row ali-item-cen col-b1">
								<view class="iconfont ic-shijianxuanzeqi mr-10"></view>
								<view
									v-if="item.activity_info[0].signup_start_time < Date.now() && item.activity_info[0].signup_end_time > Date.now()">
									{{$formatDate(item.activity_info[0].signup_start_time)}} -
									{{$formatDate(item.activity_info[0].signup_end_time)}}
								</view>
								<view v-else>{{$formatDate(item.activity_info[0].start_time)}} -
									{{$formatDate(item.activity_info[0].end_time)}}
								</view>
							</view>
							<view class="flex-dir-row ali-item-cen col-b1">
								<view class="iconfont ic-weizhi mr-10"></view>
								<view class="text-element-1">{{item.activity_info[0].location}}</view>
							</view>
						</view>
					</view>
					<view class="flex-dir-row flex-x-bet ali-item-cen pt-20 mt-20 bor-top-f3">
						<view class="flex-dir-row ali-item-cen  col-b1">
							<view class="flex-dir-row ali-item-cen">
								<image v-for="(user,i) in item.user_info.slice(0,3)" :key="i"
									:src="user.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
									:style="{marginLeft: i == 0?0:'-20rpx'}" mode="aspectFill" class="img-50 br-200">
								</image>
							</view>
							<view class="ml-10 fs-24">{{item.user_info.length}}人报名</view>
						</view>
						<view @click="showTicketPopup(index)" class="flex-dir-row flex-r-end">
							<view class="fs-26 br-200 text-ali-c fw-600 btn-bg">
								<view class="gradient-text">出示门票</view>
							</view>
						</view>
					</view>
				</view>
				<qmy-logo></qmy-logo>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				tabs: ['全部', '进行中', '报名中', '已结束'],
				signupData: [], // 我的报名数据
				dataLoaded: false, // 加载状态
				current: 0, // 当前选中的tab
				ticketIndex: 0, // 当前选中的票号
				loadingStatus: false, // 加载状态
			}
		},
		computed: {
			filteredSignupData() {
				const now = Date.now(); // 缓存当前时间戳
				return this.signupData.filter(item => {
					const activity = item.activity_info[0]; // 缓存活动信息
					switch (this.current) {
						case 0:
							return true;
						case 1:
							return activity.start_time < now && activity.end_time > now;
						case 2:
							return activity.signup_start_time < now && activity.signup_end_time > now;
						case 3:
							return activity.end_time < now;
						default:
							return true;
					}
				});
			},
			userInfo() {
				return this.$store.state.userInfo; //用户信息
			},
			qrOptions() {
				const defaultAvatar =
					"https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg";
				const defaultBg = ""; // 你可以换成默认背景图片链接
				const userAvatar = this.userInfo?.avatar_file?.url || defaultAvatar;

				const activityInfo = this.filteredSignupData?.[this.ticketIndex]?.activity_info?.[0];
				const bgSrc = activityInfo?.imgs?.[0]?.src || defaultBg;

				return {
					foregroundImageSrc: userAvatar,
					foregroundImageWidth: 340 / 2 * 0.25,
					foregroundImageHeight: 340 / 2 * 0.25,
					foregroundImagePadding: 4,
					foregroundImageBorderRadius: 4,
					foregroundImageShadowBlur: 50,
					foregroundImageShadowColor: "rgba(63, 63, 63, 0.7)",
					margin: 10,
					backgroundImageSrc: bgSrc,
					backgroundImageAlpha: 0.2,
				};
			},
			ticketId() {
				return this.filteredSignupData?.[this.ticketIndex]?.ticket_info?.[0]?.ticket_id || "暂无票号";
			}

		},
		onLoad() {
			// 查询报名表获取我参加的活动
			this.getMySignupData();
		},
		methods: {
			getMySignupData() {
				this.dataLoaded = false;
				this.$Route('get-private-data', true).getMySignUpData().then((res) => {
					this.signupData = res.data;
					this.dataLoaded = true;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			},
			showTicketPopup(index) {
				this.ticketIndex = index;
				this.$refs.ticketPopup.open();
			},
			complete(e, refName) {
				this.$set(this, 'loadingStatus', false)
				if (!e.success) {
					this.$Toast('生成失败，请重试')
				}
			},
			changePopup(e) {
				if (e.show) {
					this.$set(this, 'loadingStatus', true)
					this.$refs.uqrcode.make();
				} else {
					this.$set(this, 'loadingStatus', false)
				}
			}

		}
	}
</script>

<style lang="scss">
	.img-50 {
		width: 50rpx;
		height: 50rpx;
		border: 4rpx solid #ffffff;
	}

	.img-190 {
		width: 190rpx;
		height: 190rpx;
	}


	.text-tips {
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-right: 10rpx;
	}

	.group-popup-con {
		padding: 40rpx;
		background: #ffffff;
		border-radius: 20rpx;
		text-align: center;
	}

	.group-qrcode {
		width: 350rpx;
		height: 350rpx;
	}
</style>